<template>
	<view class="content">
		<view class="">
			<c-navBar title="课时数据详情"></c-navBar>
			<!-- <c-navBar title="教务数据"></c-navBar> -->
			<!-- <van-sticky :offset-top="44">
				<view class="heard">
					<timeSelct @emitTime="emitTime"></timeSelct>
			 
					<view class="seach-box"> 
			
						<view class="value-item">
							<input class="uni-input" focus placeholder="输入关键词" v-model="pramas.value" />
						</view>
						<view class="seach-btn">
							<text>搜索</text>
						</view>
					</view>
				</view>
			</van-sticky> -->
			<heardSeach @emitParmas="seach" />
		</view>
		<view class="content-bottom">
			<c-list class="forgetting-list" v-model:loading="loading" v-model:error="error" error-text="请求失败，点击重新加载"
				@load="Loads">
				<van-empty description="暂无数据" v-if="list.length===0" />
				<view class="forgetting-item" v-for="(item,index) in list" :key="index">
			
					<view class="forgetting-tab">
						<view class="forgetting-tab-top">
							<view class="tab-item">
								<text class="text-color-6">变更前课时</text>
								<text class="text-color-3">{{item.before_module_minute}}分钟</text>
							</view>
			
						</view> 
						<view class="forgetting-tab-top">
							<view class="tab-item">
								<text class="text-color-6">变更课时</text>
								<text class="text-color-3">{{item.module_minute}}分钟</text>
							</view>
			
						</view>
						<view class="forgetting-tab-top">
							<view class="tab-item">
								<text class="text-color-6">变更后课时</text>
								<text class="text-color-3">{{item.after_module_minute}}分钟</text>
							</view>
			
						</view>
						<view class="forgetting-tab-bottom forgetting-tab-top">
			
							<view class="tab-item">
								<image class="tab-item-img" src="../../static/forgettingIcon6.png" mode="" />
								<text class="text-color-3">{{item.create_time}}</text>
							</view>
			
			
						</view>
					</view>
					<!-- <view class="forgetting-name" :class="{'forgetting-name-2':index>3}">
						<text>已打卡</text>
					</view> -->
				</view>
			
			</c-list>
			
			<!-- <van-empty description="暂无数据"  /> -->
		</view>





	</view>
</template>

<script setup>
	import {
		getUserLogDetail
	} from "@/apis/dataList.js"
	import heardSeach from "../../components/heardSeach/index.vue"

	import {
		getTimeDate
	} from "../../utils/index.js"
	import mescrollUni from "../../components/mescroll/mescroll-uni.vue"
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app"
	import {
		ref,
		reactive
	} from "vue"
	const pramas = reactive({
		user_id: '',
		start_date: '',
		end_date: '',
		search_data: '',
		page: 1,
		size: 20,
	})

	const isNoUpdate = ref(false)
	const active = ref(0);
	const showCenter = ref(false)
	const list = ref([])
	const error = ref(false);
	const total = ref(0)
	const loading = ref(false);
	const listLoading = ref(false);

	onLoad((options) => {
		pramas.user_id = Number(options.id)
		let time = getTimeDate()
		pramas.start_date = `${time.year}/${time.month}/${time.day}`
		pramas.end_date = `${time.year}/${time.month}/${time.day}`
		init()

	})

	const seach = (data) => {
		console.log(data)
		pramas.start_date = data.start_date
		pramas.end_date = data.end_date
		pramas.search_data = data.value
		pramas.page = 1
		list.value = []
		isNoUpdate.value = false
		init()
	}
	const init = async (type) => {
		try {
			if (listLoading.value || isNoUpdate.value) {
				return
			}
			listLoading.value = true;
			if (type) {
				pramas.page = pramas.page + 1
			}
			let {
				data
			} = await getUserLogDetail(pramas)

			if (data && data.data.length > 0) {
				total.value = data.total

				list.value = [...list.value, ...data.data]
			} else if (data) {
				isNoUpdate.value = true
			}
			listLoading.value = false;
			// console.log('触底加载')
			console.log(list.value)
		} catch (err) {
			listLoading.value = false;
			console.log(err)
		}
	}
	const Loads = () => {

		init(1)
		loading.value = false;
		error.value = false;
		// fetchSomeThing().catch(() => {
		//   loading.value = false;
		//   error.value = true;
		// });
	};
</script>

<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100vw;
		height: 100vh;
	}
	.content-bottom{
		flex: 1;
		width: 100%;
		overflow: hidden;
	}
	.heard {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100vw;
		height: auto;
		background: rgba(255, 255, 255, 1);
		padding-bottom: 20rpx;
		padding-top: 10rpx;
	}


	.seach-box {
		display: flex;
		width: 670rpx;
		margin-top: 18rpx;
	}

	.type-item {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 192rpx;
		height: 66.59rpx;
		opacity: 1;
		border-radius: 10.51rpx;
		background: rgba(255, 255, 255, 1);
		border: 2rpx solid rgba(252, 247, 247, 1);

		text {
			font-size: 24rpx;
			font-weight: 400;
			letter-spacing: 0px;
			line-height: 30.46rpx;
			color: rgba(102, 102, 102, 1);
			margin-right: 28rpx;

		}

		.type-item-icon {
			font-size: 24rpx;
			color: rgba(102, 102, 102, 1);
		}


	}

	text {
		font-size: 32rpx !important;
	}

	.value-item {
		flex: 1;
		height: 66.59rpx;
		opacity: 1;
		border-radius: 10.51rpx;
		background: rgba(255, 255, 255, 1);
		margin-left: 9rpx;
		border: 2rpx solid rgba(252, 247, 247, 1);

		.uni-input {
			height: 66.59rpx;
			width: 345.21rpx;
			padding: 0 23rpx;
		}
	}

	.seach-btn {
		display: flex;
		align-items: center;
		justify-content: flex-end;

		height: 66.59rpx;
		margin-left: 26rpx;

		text {
			font-size: 21.03rpx;
			line-height: 30.46rpx;
			color: rgba(51, 51, 51, 1);
		}

	}

	.forgetting-list {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
	}

	.forgetting-item {
		margin: 0 auto;
		position: relative;
		display: flex;
		align-items: center;
		padding: 24rpx;
		width: 670rpx;
		height: 112.15rpx;
		opacity: 1;
		border-radius: 18rpx;
		background: rgba(255, 255, 255, 1);
		border: 1rpx solid rgba(204, 204, 204, 1);
		margin-bottom: 32rpx;
	}

	.forgetting-tab {
		display: flex;
		flex-direction: column;
		width: 547rpx;
	}

	.forgetting-tab-top {
		display: flex;
		justify-content: space-between;
		width: 100%;
		margin-bottom: 16rpx;

	}

	.forgetting-tab-bottom {
		margin-top: 19rpx;
	}

	.tab-item {
		display: flex;
		align-items: center;

		.tab-item-img {
			width: 30rpx;
			height: 30rpx;
			margin-right: 11rpx;
			object-fit: contain;
		}
	}

	.tab-item-text {
		/** 文本1 */
		font-size: 22rpx;
		line-height: 32rpx;
		text-align: left;


	}

	.tab-item-text1 {
		color: rgba(153, 153, 153, 1);
		/** 文本1 */

	}

	.forgetting-name {
		width: 63.08px;
		height: 31.54px;
		opacity: 1;
		transform: rotate(30deg);
		font-size: 21.03rpx;
		font-weight: 700;
		line-height: 30.46rpx;
		color: rgba(153, 153, 153, 1);
		text-align: right;
		vertical-align: top;

	}

	.forgetting-name-2 {
		color: rgba(11, 186, 81, 1);
	}

	.forgetting-item {
		height: auto;
		padding: 24rpx 32rpx;
	}

	.tab-item {
		display: flex;
		align-items: center;
	}

	text {
		font-size: 32rpx !important;
		line-height: 40rpx;
	}

	.text-color-3 {
		margin-left: 32rpx;
	}

	.forgetting-tab {
		width: 100%;
	}

	.forgetting-tab-top {
		// justify-content: center;
	}
</style>